<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./css/detail.css">
    <script src="./js/jquery-3.6.0-min.js"></script>
    <script src="./js/tools.js"></script>
    <script src="./js/enlarge.js"></script>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="shortcut icon" href="/favicon.ico" />
</head>

<body>
    <img src="https://img.alicdn.com/imgextra/i4/O1CN01RuP6G71SyJbnuaQ8M_!!6000000002315-2-tps-1190-110.png" alt=""
        class="topTu">
    <div class="head">
        <div class="headLift">
            <a href="#"><span class="iconfont icon-tianmao"
                    style="color: red;margin-right: 5px;font-size: 13px;text-decoration: none;"></span><a
                    href="./index.html">天猫首页</a></a>
            <a href="#" style="text-decoration: none;color: #999;cursor: text;"><span>瞄,&nbsp;&nbsp;欢迎来天猫</span></a>
            <a href="./login.html" class="dlzc">登录/注册</a>
        </div>
        <div class="headRight">
            <a href="#" class="v" id="vv">
                我的淘宝
                <span class="san"></span>
                <div id="aaa">
                    <p>已买到的商品</p>
                    <p>已卖出的商品</p>
                </div>
            </a>
            <a href="#"><span class="iconfont icon-tianmaochaoshigouwuche"
                    style="color: red;font-size: 15px;text-decoration: none;font-weight: bold;"></span>购物车</a>
            <a href="#" class="v">收藏夹<span class="san"></span>
                <div id="aaa">
                    <p>收藏的宝贝</p>
                    <p>收藏的店铺</p>
                </div>
            </a>
            <a href="#"><span class="iconfont icon-tianmao1"
                    style="color: red;font-size: 15px;text-decoration: none;font-weight: bold;"></span>手机版</a>
            <a href="#">淘宝网</a>
            <a href="#" class="v">商家支持<span class="san"></span>
                <div id="aaa">
                    <p>收藏的宝贝</p>
                    <p>收藏的店铺</p>
                </div>
            </a>
        </div>
    </div>
    <div class="up clearFix">
        <div class="enlarge fl">
            <div class="middle">
                <img src="#" class="zhong1">
                <div class="mask"></div>
                <div class="big">
                    <img src="" alt="" class="da1">
                </div>
            </div>
            <div class="small">
                <img class="active xiao1" src="" alt="">
                <img src="" alt="" class="xiao2">
            </div>
        </div>
        <div class="introduce fl">
            <p><span class="title"></span></p>
            <p class="jia"><span>价格</span><span class="price"></span></p>
            <p class="jianjie"></p>
            <p>
                <a href="./gouwuche.html" class="aaa">立即购买</a>
                <a class="addcart aaa" href="javascript:;">加入购物车</a>
            </p>
        </div>
    </div>

    <!-- <div class="down"></div> -->

</body>
<script src="./js/yanzheng.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/layer/3.5.1/layer.js"></script>
<script>
    var item = localStorage.getItem('item')
    item = JSON.parse(item)
    var goodsid = item.id
    document.querySelector('.zhong1').setAttribute('src', item.listPicUrl);
    document.querySelector('.da1').setAttribute('src', item.listPicUrl);
    document.querySelector('.xiao1').setAttribute('src', item.listPicUrl);
    document.querySelector('.xiao2').setAttribute('src', item.scenePicUrl);
    var e = new Enlarge()
    e.event()
    document.querySelector('.title').innerText = item.name
    document.querySelector('.jianjie').innerText = "簡介：" + item.simpleDesc
    document.querySelector('.price').innerText = '￥' + item.counterPrice
    // var str = []
    // $('.addcart').on('click', function () {
    //     if (localStorage.getItem('id')) {
    //         var sss = localStorage.getItem('data')
    //         if (sss) {
    //             str = JSON.parse(sss)
    //             console.log(str)
    //             str.push(item)
    //             str = JSON.stringify(str)
    //             localStorage.setItem('data', str)
    //         } else {
    //             str.push(item)
    //             str = JSON.stringify(str)
    //             localStorage.setItem('data', str)
    //         }
    //     } else {
    //         layer.msg('请先登录', {
    //             icon: 2,
    //             time: 1000
    //         }, () => {
    //             location.href = './login.html'
    //         })
    //     }
    // })
    /* 加入购物车 */
    $('.addcart').on('click', function () {
        let cartGoodsid = goodsid
        let name = window.localStorage.getItem('id')
        console.log(name);
        if (!name) {
            layer.msg('请先登录', {
                icon: 2,
                time: 1000
            }, () => {
                window.localStorage.setItem('url', location.href)
                location.href = '../login.html'
            })
            return false
        }
        console.log(name);
        var data = window.localStorage.getItem('data')
        if (data) {
            //有数据
            data = JSON.parse(data)
            var obj = data.find(item => {
                return item.cartGoodsid === goodsid && item.name === name
            })
            if (obj) {
                //找到了，购物车里此商品数量+1
                obj.number = obj.number - 0 + 1
                window.localStorage.setItem('data', JSON.stringify(data))
            } else {
                //没找到存入
                data.push({
                    cartGoodsid: cartGoodsid,
                    number: 1,
                    name: name
                })
                window.localStorage.setItem('data', JSON.stringify(data))
            }
        } else {
            //没有数据
            var arr = [{
                cartGoodsid: cartGoodsid,
                number: 1,
                name: name
            }]
            window.localStorage.setItem('data', JSON.stringify(arr))
        }
        layer.msg('加入购物车成功', {
            icon: 1,
            time: 1000
        })
    })
</script>

</html>